<template>
	<view>
		<view class="body after-navber">
			<view style="padding-bottom: 100rpx">
				<view class="flex-row bg-white mb-20 goods-info" v-for="(goods,index) in order.goods" v-if="!order_item_id || order_item_id == goods.id">
					<view class="flex-grow-0">
						<image mode="aspectFill" :src="goods.product_image"
							style="width: 156rpx; height: 156rpx; margin-right: 20rpx"></image>
					</view>
					<view class="flex-grow-1 flex-col">
						<view class="flex-grow-1">{{ goods.product_title }}</view>
						<view class="flex-grow-0 flex-row" style="font-size: 9pt">
							<view class="flex-grow-1">
								<view style="margin-right: 40rpx; display: inline-block"
									>
									{{ goods.product_sku_text ?  goods.product_sku_text : '默认' }}
								</view>
							</view>
							<view class="flex-grow-0">×{{ goods.goods_num }}</view>
						</view>
					</view>
				</view>
				<view class="flex-row bg-white switch-tab mb-20">
					<view @tap="switchTab" class="flex-grow-1 flex-x-center" data-id="0" v-if="order.status == 1">
						<text :class="'flex-y-center ' + switch_tab_0">退款</text>
					</view>
					<view @tap="switchTab" class="flex-grow-1 flex-x-center" data-id="1" v-if="order.status > 1">
						<text :class="'flex-y-center ' + switch_tab_1">退货退款</text>
					</view>
					<view @tap="switchTab" class="flex-grow-1 flex-x-center" data-id="2" v-if="order.status > 1">
						<text :class="'flex-y-center ' + switch_tab_2">换货</text>
					</view>
				</view>
				<view class="switch-body">
					<view class="flex-row bg-white form-row mb-20">
						<view class="flex-grow-0">
							<text class="form-label" v-if="switch_tab_0 =='active'">退款原因</text>
							<text class="form-label" v-if="switch_tab_1 =='active'">退货退款原因</text>
							<text class="form-label" v-if="switch_tab_2 =='active'">换货原因</text>
						</view>
						<view class="flex-grow-1">
							<picker @change="bindPickerChange" :value="index" :range="array" range-key="content">
								<view class="uni-input">{{array[index].content}}</view>
							</picker>
						</view>
					</view>
					<view class="flex-row bg-white form-row mb-20">
						<view class="flex-grow-0">
							<text class="form-label">说明</text>
						</view>
						<view class="flex-grow-1">
							<textarea @input="descInput" data-type="1" placeholder="请输入内容" rows="2"
								style="width: 100%; padding: 0"></textarea>
						</view>
					</view>
					<view class="flex-row bg-white form-row mb-20">
						<view class="flex-grow-0">
							<text class="form-label">退款金额</text>
						</view>
						<view class="flex-grow-1">
							<text class="refund-price" v-if="order.type == 1">￥{{ order.max_refund_price }}</text>
							<text class="refund-price" v-if="order.type == 2 && order.status == 1">{{ order.max_refund_score }}{{money_name}} + ￥{{ order.max_refund_price }}</text>
							<text class="refund-price" v-if="order.type == 2 && order.status > 1">{{ order.max_refund_score }}{{money_name}}</text>
						</view>
					</view>
					<view class="bg-white form-row mb-20">
						<view class="mb-20">
							<text class="form-label">上传凭证</text>
						</view>
						<view class="image-list">
							<view class="image-preview" :data-index="index"
								v-for="(item, index) in pic_list" :key="item.id">
								<text @tap="deleteImage(index)" class="flex-x-center flex-y-center image-del"
									:data-index="index" data-type="1">×</text>

								<image mode="aspectFill" :src="item" style="width: 160rpx; height: 160rpx"></image>
							</view>
							<view @tap="chooseImage" class="image-picker" data-type="1"
								v-if="!pic_list ||pic_list.length < 9">
								<image src="/static/images/icon-image-picker.png" style="width: 160rpx; height: 160rpx">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<form @submit="refundSubmit" data-type="1" :reportSubmit="true" >
				<button class="submit-btn" formType="submit">
		 		<text>提交</text>
				</button>
			</form>
		
		</view>
	</view>
</template>

<script>
	import {Order} from '../../../apirequest/order-model.js';
	var o = new Order();
	export default {
		data() {
			return {
				order: [],
				switch_tab_0:'active',
				switch_tab_1: '',
				switch_tab_2: '',
				pic_list:[],
				pic_list_:[],
				array: [{id:0,content:'请选择原因'}],
				index: 0,
				order_id:0,
				order_item_id:0,
				content:'',
				money_name:this.globalData.money_name,
			}
		
		},
		onLoad(options) {
			this.order_id = options.order_id
			if(options.order_item_id){
				this.order_item_id = options.order_item_id
			}
			
			this._index()
		},
		methods: {
			_index(){
				var that = this;
				o.get_after_detail({id:this.order_id,order_item_id:this.order_item_id},(res) => {
					if(res.code == 1){
						that.order = res.data
						var reason = res.data.reason
						if(res.data.status > 1){
							that.switch_tab_1 = 'active'
							that.switch_tab_0 = ''
						}
							that._reason()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			_reason(){
				var that = this;
				var reason = this.order.reason
				var arr = [];
				reason.forEach((e,i) => {
					if(that.switch_tab_0 == 'active'){
						if(e.type == 1){
							arr.push(e);
						}
					}
					if(that.switch_tab_1 == 'active'){
						if(e.type == 2){
							arr.push(e);
						}
					}
					if(that.switch_tab_2 == 'active'){
						if(e.type == 3){
							arr.push(e);
						}
					}
				})
				that.array = [{id:0,content:'请选择原因',type:0}].concat(arr)
			},
			//提交
			refundSubmit(){
				var param = {
					order_id:this.order_id,
					order_item_id:this.order_item_id,
					reason:this.array[this.index],
					content:this.content,
					images:this.pic_list_.join(',')
				};
				if(this.index == 0){
					uni.showToast({
						title:'请选择申请原因',
						icon:'none'
					})
					return false;
				}
				o.aftersale_order(param,(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none',
					})
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
		   bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			switchTab: function(t) {
				var e = this;

				if (0 == t.currentTarget.dataset.id) {
					e.switch_tab_0 = 'active'
					e.switch_tab_1 = ''
					e.switch_tab_2 = ''
				}else if (1 == t.currentTarget.dataset.id) {
					e.switch_tab_0 = ''
					e.switch_tab_1 = 'active'
					e.switch_tab_2 = ''
				} else {
					e.switch_tab_0 = ''
					e.switch_tab_1 = ''
					e.switch_tab_2 = 'active'
				}
				this._reason()
			},
		
			descInput: function(t) {
				this.content = t.detail.value;
					
			},
			chooseImage: function(t) {
				var _this = this;
				var len = this.pic_list.length;
				var c = 6 - len;
				uni.chooseImage({
					count: c,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'], 
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach((e,i) => {
							len++;
							if(len > 9){
								uni.showToast({
									title:'最多只能上传9张图片',
									icon:'none'
								})
								return false;
							}
							o.upload(tempFilePaths[i], (r) => {
								var r = JSON.parse(r);
								if (r.code == 1) {
									_this.pic_list.splice(len+i, 1, r.data.fullurl);
									_this.pic_list_.splice(len+i, 1, r.data.url);
							
									
								} else {
									uni.showToast({
										title: r.msg,
										icon: 'none'
									})
								}
							},'store')
						})
				
					}
				})
				

			},
			deleteImage: function(index) {
				this.pic_list.splice(index, 1);
				this.pic_list_.splice(index, 1);
			},
		}
	}
</script>

<style>
	.goods-info {
		padding: 30rpx 24rpx;
		border-top: 1rpx solid #e3e3e3;
	}

	.switch-tab {
		border-bottom: 1rpx solid #e3e3e3;
	}

	.switch-tab text {
		height: 100rpx;
		border-bottom: 5rpx solid transparent;
	}

	.switch-tab text.active {
		border-bottom-color: #ff4544;
		color: #ff4544;
	}

	.switch-body {
		display: block;
	}

	.switch-body.active {
		display: block;
	}

	.form-row {
		padding: 28rpx 24rpx;
	}

	.form-row .form-label {
		white-space: nowrap;
		margin-right: 32rpx;
	}

	.form-row textarea {
		height: 120rpx;
	}

	.refund-price {
		color: #ff4544;
	}

	.image-list {
		margin-left: -20rpx;
		margin-top: -20rpx;
	}

	.image-picker {
		font-size: 0;
	}

	.image-picker,
	.image-preview {
		display: inline-block;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.image-preview {
		position: relative;
	}

	.image-preview .image-del {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		height: 50rpx;
		width: 50rpx;
		background: #ff4544;
		color: #fff;
		font-weight: bolder;
		border-radius: 999rpx;
		font-size: 9pt;
		box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.submit-btn {
		height: 100rpx;
		line-height: 100rpx;
		background: #ff4544;
		color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.active {
		visibility: visible;
	}
</style>
